import React, { useState, useEffect } from 'react';
import { Resizable } from 'react-resizable'; //拖拽第三方库
import { Space, Table, Tag } from 'antd';
export default function Index() {
  // 拖拽
  const [dcolumns, setDcolumns] = useState([]);
  const [components, setComponents] = useState({});
  // 数据
  const [list, setList] = useState();
  // 列
  const column = [
    {
      title: '序号',
      dataIndex: 'id',
      width: 100,
      ellipsis: true,
    },
    {
      title: '合同名称',
      dataIndex: 'contractname',
      width: 100,
      ellipsis: true,
    },
    {
      title: '合同编号',
      dataIndex: 'contractid',
      width: 100,
      ellipsis: true,
    },
    {
      title: '利润总额',
      dataIndex: 'totalprofit',
      width: 100,
      ellipsis: true,
    },
    {
      title: '利润率(%)',
      dataIndex: 'profitmargin',
      width: 100,
      ellipsis: true,
    },
    {
      title: '数量合计',
      dataIndex: 'numtotal',
      width: 100,
      ellipsis: true,
    },
    {
      title: '销售总额',
      dataIndex: 'totalsales',
      width: 100,
      ellipsis: true,
    },
    {
      title: '税额',
      dataIndex: 'taxamount',
      width: 100,
      ellipsis: true,
    },
    {
      title: '建议进价成本',
      dataIndex: 'Purchaseprice',
      width: 100,
      ellipsis: true,
    },
    {
      title: '客户名称',
      dataIndex: 'customername',
      width: 100,
      ellipsis: true,
    },
    {
      title: '销售人员',
      dataIndex: 'sale',
      width: 100,
      ellipsis: true,
    },
    {
      title: '到账总额',
      dataIndex: 'totalamountreceived',
      width: 100,
      ellipsis: true,
    },
    {
      title: '产品成本',
      dataIndex: 'Productcost',
      width: 100,
      ellipsis: true,
    },
    {
      title: '费用总额',
      dataIndex: 'Totalexpenses',
      width: 100,
      ellipsis: true,
    },
    {
      title: '退货总额',
      dataIndex: 'Totalreturnamount',
      width: 100,
      ellipsis: true,
    },
    {
      title: '发货数量',
      dataIndex: 'Shipmentquantity',
      width: 100,
      ellipsis: true,
    },
    {
      title: '出库数量',
      dataIndex: 'Deliveryquantity',
      width: 100,
      ellipsis: true,
    },
    {
      title: '发货状态',
      dataIndex: 'Shipmentstatus',
      width: 100,
      ellipsis: true,
    },
    {
      title: '出库状态',
      dataIndex: 'Outboundstatus',
      width: 100,
      ellipsis: true,
    },
  ];
  // 数据
  let data = [];
  for (let i = 1; i <= 10; i++) {
    data.push({
      id: i,
      contractname: '家兴保险，买的放心，赔的更放心',
      contractid: 'ZJX123456',
      totalprofit: '2228511.00',
      profitmargin: '99',
      numtotal: 100.0,
      totalsales: 99999,
      taxamount: 2000,
      Purchaseprice: 0.0,
      customername: '前端无敌大佬嘎嘎乱杀侯',
      sale: '程序无霸哥--权大神',
      totalamountreceived: 56214521,
      Productcost: 0.0,
      Totalexpenses: 0.0,
      Totalreturnamount: 0.0,
      Shipmentquantity: 121541,
      Deliveryquantity: 45542121,
      Shipmentstatus: '已发货',
      Outboundstatus: '全部出库',
    });
  }

  useEffect(() => {
    setList(data);
    setDcolumns(column),
      setComponents({
        header: {
          cell: ResizeableTitle,
        },
      });
  }, []);
  // 拖拽
  const ResizeableTitle = (props) => {
    const { onResize, width = 100, ...restProps } = props;
    if (!width) {
      return <th {...restProps} />;
    }

    return (
      <Resizable width={width} height={0} onResize={onResize}>
        <th {...restProps} />
      </Resizable>
    );
  };
  const handleResize =
    (index) =>
    (e, { size }) => {
      // console.log('size', size);

      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      };
      setDcolumns(nextColumns);
    };
  const columns = dcolumns.map((col, index) => ({
    ...col,
    onHeaderCell: (column) => ({
      width: col.width * 1 || 100,
      onResize: handleResize(index),
    }),
  }));
  return (
    <>
      <Table
        components={components}
        pagination={false}
        bordered
        rowKey={(columns) => columns.id}
        columns={columns}
        dataSource={list}
        scroll={{ x: 'max-content', y: '280px' }}
      />
      <div className="home_fy">
        <div className="home_fy_left">
          <svg
            t="1675319740940"
            className="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7074"
            width="20"
            height="20"
          >
            <path
              d="M872.533 819.627a34.133 34.133 0 0 1-48.213 48.213L492.373 535.893a34.133 34.133 0 0 1 0-48.213L824.32 155.733a34.133 34.133 0 0 1 48.213 48.214L564.907 512z m-341.333 0a34.133 34.133 0 0 1-48.213 48.213l-331.52-331.52a34.133 34.133 0 0 1 0-48.213L483.413 156.16a34.133 34.133 0 0 1 48.214 48.213L223.573 512z"
              fill="#333333"
              p-id="7075"
            ></path>
          </svg>
          <svg
            t="1675319795515"
            className="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7214"
            width="20"
            height="20"
          >
            <path
              d="M677.391515 873.916768c-7.86101 0-15.618586-2.999596-21.617778-8.895354L324.473535 533.721212c-11.998384-11.894949-11.998384-31.340606 0-43.235555L655.670303 159.288889c5.999192-5.999192 13.756768-8.895354 21.617778-8.895354 7.757576 0 15.618586 2.999596 21.617778 8.895354 11.894949 11.894949 11.894949 31.237172 0 43.235555L389.223434 512.103434 698.905859 821.785859c11.894949 11.998384 11.894949 31.340606 0 43.235555-5.895758 5.895758-13.756768 8.895354-21.514344 8.895354z m0 0"
              fill="#666666"
              p-id="7215"
            ></path>
          </svg>
          <svg
            t="1675319856049"
            className="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7882"
            width="20"
            height="20"
          >
            <path
              d="M531.185456 943.532317c0 8.899694-6.493901 16.114003-14.503319 16.114003l-9.364275 0c-8.010441 0-14.504342-7.214309-14.504342-16.114003L492.81352 80.46666c0-8.898671 6.493901-16.114003 14.504342-16.114003l9.364275 0c8.009418 0 14.503319 7.215332 14.503319 16.114003L531.185456 943.532317z"
              p-id="7883"
            ></path>
          </svg>
          <span style={{ marginRight: '10px' }}>第</span>
          <input style={{ marginRight: '10px' }} type="text" value="1" />
          <span style={{ marginRight: '5px' }}>页，共</span>
          <span style={{ marginRight: '5px' }}>1</span>
          <span>页</span>
          <svg
            t="1675319856049"
            className="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7882"
            width="20"
            height="20"
          >
            <path
              d="M531.185456 943.532317c0 8.899694-6.493901 16.114003-14.503319 16.114003l-9.364275 0c-8.010441 0-14.504342-7.214309-14.504342-16.114003L492.81352 80.46666c0-8.898671 6.493901-16.114003 14.504342-16.114003l9.364275 0c8.009418 0 14.503319 7.215332 14.503319 16.114003L531.185456 943.532317z"
              p-id="7883"
            ></path>
          </svg>
          <svg
            t="1675320084570"
            className="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="11159"
            width="20"
            height="20"
          >
            <path
              d="M151.467 204.373a34.133 34.133 0 1 1 48.213-48.213l331.947 331.947a34.133 34.133 0 0 1 0 48.213L199.68 867.84a34.133 34.133 0 1 1-48.213-48.213L459.093 512z m341.333 0a34.133 34.133 0 0 1 48.213-48.213L872.96 488.107a34.133 34.133 0 0 1 0 48.213L541.013 868.267a34.133 34.133 0 0 1-48.213-48.214L800.427 512z"
              fill="#333333"
              p-id="11160"
            ></path>
          </svg>
          <svg
            t="1675320111791"
            className="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="12072"
            width="20"
            height="20"
          >
            <path
              d="M386.640017 196.405191 687.536947 487.723004c13.840827 13.408717 13.840827 35.135036 0 48.543753s-36.293132 13.408717-50.156485 0L336.483532 244.948944c-13.840827-13.408717-13.840827-35.135036 0-48.543753S372.777687 182.996474 386.640017 196.405191z"
              fill="#879196"
              p-id="12073"
            ></path>
            <path
              d="M336.483532 779.073583l300.895906-291.351603c13.863354-13.408717 36.316683-13.408717 50.156485 0 13.840827 13.408717 13.840827 35.135036 0 48.543753L386.640017 827.617336c-13.863354 13.408717-36.316683 13.408717-50.156485 0S322.642705 792.437246 336.483532 779.073583z"
              fill="#879196"
              p-id="12074"
            ></path>
          </svg>
        </div>
        <div className="home_fy_right">
          显示
          <span>1-10</span>
          条，共<span>10</span>条
        </div>
      </div>
    </>
  );
}
